<template>
    <component is="a-modal" v-model:visible="visible" :width="1000" :title="title" :mask-closable="false"  @cancel="close" @ok="close">
       <a-table :columns="columns" :data="tableData" :loading="loading" :pagination="false">
            <template #pay_num="{record}">
                <div><text v-if="record.money_code=='CNY'">¥</text> {{ record.pay_num }}</div>
                <div v-if="record.money_code=='CNY'">流水号: {{ record?.other_param?.sn ?record?.other_param?.trade_no:record?.other_param?.channel_sn }}</div>
            </template>
       </a-table>
    </component>
</template>

<script setup>
import { ref, reactive, computed, watch } from "vue";
import { Message } from "@arco-design/web-vue";
import mallApi from '@/api/system/mall'
import { throttle } from "lodash";
import tool from '@/utils/tool'
import ENUMS from '@/utils/enums'
const emit = defineEmits(["success"]);
const visible = ref(false);
const loading = ref(false);
const title = ref('')

const columns = reactive([
    { title: '支付时间', dataIndex: 'create_time', width: 180,align:'center' },
    { title: '支付渠道', dataIndex: 'method_text', width: 180,align:'center'},
    { title: '支付金额', slotName: 'pay_num', width: 180,align:'center' },
])
const searchForm=ref({
    id:''
})
// 打开弹框
const open = async (data) => {
    console.log('data', data);
    title.value = `订单支付记录， ID=${data.id}`
    visible.value = true;
    searchForm.value.id = data.id
    refresh()
};
const tableData=ref([])
const refresh=async()=>{
    loading.value=true
    const {data}= await mallApi.pay_record(searchForm.value.id)
    tableData.value=data.list
    loading.value=false
}


// 关闭弹窗
const close = () => (visible.value = false);
defineExpose({ open });
</script>